<template>
  <div class="dianying">
    <van-nav-bar
      title="电影演出"
      left-text=""
      right-text="···"
      left-arrow
      @click-left="funa()"
    />
    <van-search
      shape="round"
      background="#eeeeee"
      placeholder="搜索影片、电影、演出"
    />
    <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff7d27">
        <van-swipe-item
          ><img src="../../../../public/lifeimg/bnn22.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../../../public/lifeimg/bnn23.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../../../public/lifeimg/bnn22.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../../../public/lifeimg/bnn23.png" alt=""
        /></van-swipe-item>
      </van-swipe>
      <van-notice-bar
        left-icon="volume-o"
        background="#fffbe8"
        text="2022年7月10日起，支付1分钟内出票成功的电影票订单将不在发送短信通知..."
      />
    </div>
    <div class="navbox">
      <div class="zffwbt">
        <h3>正在热映</h3>
        <span>全部 ></span>
      </div>
      <ul class="remena">
        <li v-for="(v, i) in dianying" :key="i">
          <img :src="v.imgUrl" alt="" />
          <h4>{{ v.title }}</h4>
          <span>{{ v.cont }}</span>
          <div class="goup">购票</div>
        </li>
      </ul>
    </div>
    <div class="navbox">
      <div class="zffwbt">
        <h3>即将上映</h3>
        <span>全部 ></span>
      </div>
      <ul class="remena">
        <li v-for="(v, i) in dianyingb" :key="i">
          <img :src="v.imgUrl" alt="" />
          <h4>{{ v.title }}</h4>
          <span>{{ v.cont }}</span>
          <div class="goup">购票</div>
        </li>
      </ul>
    </div>
    <div class="navbox" style="background-color: #fff; width: 100%">
      <div class="zffwbt" style="width: 92%; margin: auto; padding-top: 0.1rem">
        <h3>热门演出</h3>
        <span>全部 ></span>
      </div>
      <ul class="remen">
        <li v-for="(v, i) in dianyingc" :key="i">
          <img :src="v.imgUrl" alt="" />
          <h4>{{ v.title }}</h4>
          <span class="xiao">{{ v.cont }}</span>
          <div class="dibu">
            <span>￥39起</span>
            <span>西安市</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dianying"],
  methods: {
    funa() {
      this.$router.push("/life");
    },
  },
  //使用计算属性-----截取部分数据
  computed: {
    dianyingb: function () {
      return this.dianying.slice(6, 15);
    },
    dianyingc: function () {
      return this.dianying.slice(4, 20);
    },
  },
};
</script>
<style lang="less" scoped>
.lunbo {
  width: 90%;
  margin: 0.1rem auto;
}
.dianying {
  width: 100%;
  margin: 0.1rem auto;
  height: auto;
  background-color: #eeeeee;
}

.navbox {
  width: 95%;
  height: 2.2rem;
  padding-bottom: 0.1rem;
  height: auto;
  margin: auto;
  margin-top: 0.1rem;
}
.remena {
  display: flex;
  height: 2.1rem;
  overflow-y: auto;

  li {
    flex-shrink: 0;
    border-radius: 0.1rem;
    width: 1rem;
    background-color: #fff;
    border: 0.01rem solid #dddfe1;
    text-align: center;
    font-size: 0.14rem;
    align-items: center;
    margin-top: 0.1rem;
    margin-right: 0.1rem;

    p {
      span {
        font-size: 0.3rem;
      }
    }
  }
}
.toptex {
  margin-top: 0.0067rem;
}
img {
  width: 100%;
  border-radius: 0.1rem;
}
.zffwbt {
  width: 100%;
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.12rem;
  display: flex;
  justify-content: space-between;
}
h3 {
  line-height: 0.3rem;
  font-size: 0.16rem;
}
h4 {
  line-height: 0.2rem;
  font-size: 0.1rem;
}
span {
  font-size: 0.1rem;
  color: #747675;
}

.remen {
  width: 92%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.remen li {
  width: 47%;
  height: 2.58rem;
  border-radius: 0.1rem;
  background-color: #fff;
  border: 0.01rem solid #dddfe1;
  text-align: center;
  font-size: 0.14rem;
  align-items: center;
  margin-top: 0.1rem;
}
.goup {
  width: 0.625rem;
  height: 0.2rem;
  margin: auto;
  background-color: #f07a23;
  color: #fff;
  border-radius: 0.1rem;
  font-size: 0.1rem;
  line-height: 0.2rem;
  margin-top: 0.1rem;
}
.dibu {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
}
.dibu span {
  color: #f07a23;
}
</style>